<template>
  <div id="app">
    <van-tabbar
      v-if="isShow"
      v-model="active"
      route
      active-color="#b4282d"
      inactive-color="#000"
    >
      <van-tabbar-item replace to="/home" name="home" icon="wap-home"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/topic" name="topic" icon="column"
        >专题</van-tabbar-item
      >
      <van-tabbar-item replace to="/category" name="category" icon="wap-nav"
        >分类</van-tabbar-item
      >
      <van-tabbar-item replace to="/car" name="car" icon="cart"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/my" name="my" icon="manager"
        >我的</van-tabbar-item
      >
    </van-tabbar>
    <transition
      mode="out-in"
      enter-active-class="animate__animated animate__fadeIn animate__fast"
    >
      <router-view />
    </transition>
  </div>
</template>
<script>

export default {
  data() {
    return {
      active: 0,
      isShow: true,
    };
  },
  watch: {
    $route: function (to, from) {
      // $route 监听路由变化
      // to 代表需要去的路径
      // from  代表来自于哪个路径
      if (to.meta.isFootShow == false) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },
  created() {

    localStorage.setItem("openId", "15518269729");
  },
};
</script>


<style lang="less">
img {
  width: 100%;
}
#app .van-tabbar {
  z-index: 999;
}
body,
html {
  background-color: #f4f4f4;
  // background-color: #ffffff;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}
p,
h3,
h4 {
  margin: 0;
  padding: 0;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
